<template>
	<!-- 修改手机号 -->
	<view>
		<baseHead :title="title" :showReturn="true" :right="false" > </baseHead>
		<view class="box">
			<!-- 			<view class="content">
				<view class="content-view">
					<text>原手机号</text>
				</view>
				<view style="width: 100%;">
					{{yuanshojihao}}
				</view>
			</view>

			<view class="content">
				<view class="content-view">
					<text>手机号</text>
				</view>
				<view style="width: 100%;" class="fl-c">
					<u-input placeholder="请输入修改的手机号" border='none' v-model="shojihao"></u-input>
					<text style="color: #1563FA;" @click="yanzhengma">获取验证码</text>
				</view>
			</view>

			<view class="content">
				<view class="content-view">
					<text>验证码</text>
				</view>
				<view style="width: 100%;">
					<u-input placeholder="请输入验证码" border='none' v-model="yzmm"></u-input>
				</view>
			</view> -->

			<u-form :model="form" label-width="100" prop="form" borderBottom required :borderBottom="false">
				<u-form-item label="原手机号" label-width="100" class="content">
					<view style="width: 100%">
						<u-input style="background-color: #fff" placeholder="请输入" v-model="form.yuanshojihao"
							input-align="right" border="none" :adjustPosition="false" />
					</view>
				</u-form-item>

				<u-form-item label="新手机号" label-width="100" class="content">
					<view style="width: 100%">
						<u-input style="background-color: #fff" placeholder="请输入" v-model="form.shojihao"
							input-align="right" border="none" :adjustPosition="false" />
					</view>
				</u-form-item>

				<u-form-item label="验证码" label-width="100" prop="from.Code" borderBottom ref="item1"
					:borderBottom="false" class="content">
					<view style="width: 100%">
						<!-- #ifndef APP-NVUE -->
						<u-input v-model="form.yzmm" border="none" placeholder="请输入验证码" :adjustPosition="false">
							<!-- #endif -->
							<!-- #ifdef APP-NVUE -->
							<u--input v-model="form.yzmm" border="none" placeholder="请输入验证码" :adjustPosition='false'>
								<!-- #endif -->
								<template slot="suffix">
									<!-- <u-button @tap="yanzhengma" :text="tips" type="success" size="mini"
										:disabled="disabled1"></u-button> -->
									<view @click="yanzhengma" style="font-size: 28rpx;color: #006FFF;">{{tips}}</view>
								</template>
								<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						</u--input>
						<!-- #endif -->
					</view>
				</u-form-item>
				<u-code ref="uCode" @change="codeChange" seconds="60" @start="disabled1 = true"
					@end="disabled1 = false">
				</u-code>
			</u-form>

		</view>
		<view class="btn" @click="onsubmit">
			<view>提交</view>
		</view>
	</view>
</template>

<script>
	import baseHead from '@/pages/component/baseHead.vue'
	export default {
		data() {
			return {

				title: "修改手机号",
				value: '',
				show: false,
				form: {
					yuanshojihao: "",
					shojihao: "",
					yzmm: "",
				},
				tips: '',
				disabled1: false,
			}
		},
		components: {
			baseHead,
		},
		onLoad() {},

		onShow() {
			this.ondatetext()
		},

		methods: {
			codeChange(text) {
				this.tips = text;
			},
			ondatetext() {
				this.$http.core.myinfo().then(res => {
					if (res.Success) {
						console.log(res)
						this.form.yuanshojihao = res.Result.PhoneNumber
					}
				})
			},
			yanzhengma() {
				if (!this.form.shojihao) {
					uni.$u.toast("请输入手机号")
					return;
				}
				console.log(this.form.shojihao);
				let email_reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
				if (email_reg.test(this.form.shojihao)) {
					let obj = {
						"PhoneNumber": this.form.shojihao,
						"Length": 4
					}
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码'
						})
						this.$http.core.sendSmsCode(obj).then(res => {
							uni.hideLoading();
							uni.$u.toast(res.Message)
						})
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}else{
						uni.$u.toast('倒计时结束后再发送');
					}

				} else {
					uni.$u.toast("手机号错误")
				}
			},
			onsubmit() {
				if (!this.form.shojihao) {
					uni.$u.toast("请输入手机号")
					return;
				}
				if (!this.form.yzmm) {
					uni.$u.toast("请输入验证码")
					return;
				}
				let email_reg = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
				if (email_reg.test(this.form.shojihao)) {
					let obj = {
						"Code": this.form.yzmm,
						"PhoneNumber": this.form.shojihao
					}
					this.$http.core.editPhoneNumber(obj).then(res => {
						if (res.Success) {
							this.$util.toast("修改成功")
							setTimeout(() => {
								uni.navigateBack();
							}, 3000)
						}
					})
				} else {
					uni.$u.toast("手机号错误")
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		margin: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0rpx 40rpx;

		.content {
			// margin-top: 30rpx;
			background: #FFFFFF;
			display: flex;
			// align-items: center;
			justify-content: flex-start;

			border-bottom: 1rpx solid #E7E7E8;

			.content-view {
				margin-right: 20rpx;
				width: 30%;

				text {
					background: #FFFFFF;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.btn {
		position: fixed;
		// width: 100%;
		bottom: 20rpx;
		right: 58rpx;
		left: 58rpx;
		background: #3476FE;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		padding: 24rpx 288rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	
		view {
			font-size: 30rpx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	
</style>